﻿<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Hotnet.Web.Utility.VideoRotatorControl>" %>
<div id="mainPictureRotator" class="container">
	<div class="main_image">
		<div id="divEmbed" style=" padding:2px;">
			<embed src='<%=Model.Videos.Count()==0 ? "": Model.Videos[0].VideoSrc %>' quality="high" width="500" height="400" align="middle"
				allowScriptAccess="sameDomain" 
				type="application/x-shockwave-flash">
			</embed>
			
		</div>
		<div class="desc">
			<a href="#" class="collapse">Close Me!</a>
			<div class="block">
				<div class="videoName" style=" margin-left:10px; padding-top:4px;">
					<%=Model.Videos.Count() == 0 ? "" : Model.Videos[0].Name%>
				</div>
				<small><%=Model.Videos.Count() == 0 ? "" : Model.Videos[0].AddTime == null ? "" : Model.Videos[0].AddTime.Value.ToString("yyyy-MM-dd")%></small>
				<p>
					<%=Model.Videos.Count() == 0 ? "" : Model.Videos[0].Description%>
				</p>
			</div>
		</div>
	</div>
	<div class="image_thumb">
		<ul>
			<% for (int i = 0; i < Model.Videos.Count(); i++)
	  {%>
			<li>
				<a href='<%=Model.Videos[i].VideoSrc %>'>
					<img src="<%=Hotnet.Biz.Properties.Settings.Default.VideoCoverImageFolder+Model.Videos[i].CoverImageSrc %>" alt="Image Name" />
				</a>
				<div class="block">
					<div class=" videoName">
						<%=Model.Videos[i].Name %>
					</div>
					<small>
						<%=Model.Videos[i].AddTime == null ? "" : Model.Videos[i].AddTime.Value.ToString("yyyy/MM/dd")%>
					</small>
					<p>
						<%=Model.Videos[i].Description %>
					</p>
				</div>
			</li>
			<% } %>
		</ul>
	</div>
</div>

<script type="text/javascript">

	var flashHead="<embed src='"
	var flashTail = "' quality='high' width='500' height='400' align='middle' allowScriptAccess='sameDomain' type='application/x-shockwave-flash'> </embed>'";
	$(document).ready(function() {

		//Show Banner
		$(".main_image .desc").show(); //Show Banner
		$(".main_image .block").animate({ opacity: 0.85 }, 1); //Set Opacity

		//Click and Hover events for thumbnail list
		$(".image_thumb ul li:first").addClass('active');
		$(".image_thumb ul li").click(function() {
			//Set Variables
			//var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
			var videoSrc = $(this).find('a').attr("href"); //Get Main Image URL
			var videoDesc = $(this).find('.block').html(); 	//Get HTML of block
			var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block	

			if ($(this).is(".active")) {  //If it's already active, then...
				return false; // Don't click through
			} else {
				//Animate the Teaser
				$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250, function() {
					$(".main_image .block").html(videoDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250);
					$(".main_image .videoName").attr("style", "margin-left:10px;padding-top:4px;");
					//$(".main_image img").attr({ src: imgTitle, alt: imgAlt });
					$("#divEmbed").css("display", "none");
					$("#divEmbed").html(flashHead + videoSrc + flashTail);
					$("#divEmbed").show();
				});
			}

			$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
			$(this).addClass('active');  //add class of 'active' on this list only
			return false;

		}).hover(function() {
			$(this).addClass('hover');
		}, function() {
			$(this).removeClass('hover');
		});

		//Toggle Teaser
		$("a.collapse").click(function() {
			$(".main_image .block").slideToggle();
			$("a.collapse").toggleClass("show");
		});

	});      //Close Function
</script>

<style type="text/css">
	#mainPictureRotator
	{
		-moz-background-clip: border;
		-moz-background-inline-policy: continuous;
		-moz-background-origin: padding;
		background: #F0F0F0 none repeat scroll 0 0;
		border: 1px solid #CCCCCC;
		padding: 10px;
	}
	.container
	{
		margin: 0 auto;
		overflow: hidden;
		width: 928px;
		
	}
	.main_image
	{
		width: 504px;
		height: 456px;
		float: left;
		background: #333;
		position: relative;
		overflow: hidden; /*--Overflow hidden allows the description to toggle/tuck away as it slides down--*/
		color: #fff;
	}
	.main_image h2
	{
		font-size: 2em;
		font-weight: normal;
		margin: 0 0 5px;
		padding: 10px;
	}
	.main_image p
	{
		font-size: 1.2em;
		line-height: 1.6em;
		padding: 10px;
		margin: 0;
	}
	.block small
	{
		/*--We'll be using this same style on our thumbnail list--*/
		font-size: 1em;
		padding: 0 0 0 20px;
		background: url(/images/icon_calendar.gif) no-repeat 0 center;
	}
	.main_image .block small
	{
		margin-left: 10px;
	}
	.main_image .desc
	{
		position: absolute;
		bottom: 0;
		left: 0; /*--Stick the desc class to the bottom of our main image container--*/
		width: 100%;
		display: none; /*--Hide description by default, if js is enabled, we will show this--*/
	}
	.main_image .block
	{
		width: 100%;
		background: #111;
		border-top: 1px solid #000;
	}
	.main_image a.collapse
	{
		/*--This is our hide/show tab--*/
		background: url(/images/btn_collapse.gif) no-repeat left top;
		height: 27px;
		width: 93px;
		text-indent: -99999px;
		position: absolute;
		top: -27px;
		right: 20px;
	}
	.main_image a.show
	{
		background-position: left bottom;
	}
	.image_thumb
	{
		float: left;
		width: 415px;
		background: #f0f0f0;
		border-right: 1px solid #fff;
		border-top: 1px solid #ccc;
	}
	.image_thumb img
	{
		border: 1px solid #ccc;
		padding: 5px;
		background: #fff;
		float: left;
		width: 61px;
		height: 47px;
	}
	.image_thumb ul
	{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.image_thumb li
	{
		height:50px;
	}
	.image_thumb ul li
	{
		margin: 0;
		padding: 12px 10px;
		background: #f0f0f0 url(/images/nav_a.gif) repeat-x;
		width:395px;
		float: left;
		border-bottom: 1px solid #ccc;
		border-top: 1px solid #fff;
		border-right: 1px solid #ccc;
	}
	.image_thumb ul li.hover
	{
		/*--Hover State--*/
		background: #ddd;
		cursor: pointer;
	}
	.image_thumb ul li.active
	{
		/*--Active State--*/
		background: #fff;
		cursor: default;
	}
	html .image_thumb ul li h2
	{
		font-size: 1.5em;
		margin: 5px 0;
		padding: 0;
	}
	.image_thumb ul li .block
	{
		float: left;
		margin-left: 10px;
		padding: 0;
		width: 310px;
	}
	.image_thumb ul li p
	{
		display: none;
	}
	
	.videoName
	{
		 font-size:13px;
	}
	/*--Hide the description on the list items--*/
</style>